<template>
  <header><HomeHeader/></header>
  <div class="home">
    <aside class="left">
        <router-link :to="{name:'HomeMainIndex'}">介绍说明</router-link>
        <router-link :to="{name:'HomeMainList'}">人员列表</router-link>
    </aside>
    <article class="right">
      <router-view></router-view>
    </article>
  </div>
</template>

<script setup>
import HomeHeader from "./HomeHeader.vue";
</script>

<style scoped>
.home{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.left{
    width: 20%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(53, 53, 53);
}
.left a{
  display: block;
  color: white;
  background-color: rgb(53, 53, 53);
  line-height: 50px;
  width: 100%;
  text-align: center;
}
.left .router-link-active{
  color: darkcyan;
  background-color: white;

}
.right{
  width: 85%;
}
</style>